<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div id="app">
		<div >{{fullName}}
			{{age}}
		</div>
		
	
	</div>

</body>
<script type="text/javascript">

	var vm = new Vue({
		el:"#app",
		data:{
			firstName:"Dell",
			lastName:"Lee",
			fullName:"",
			age:28
		},
		//计算属性，记住，这是属性，不是方法，意味着这可以像插值表达式一样把计算出来的结果插入到文档结构中去

		//计算属性有缓存机制，首次计算时挂载好数据，如果重新渲染的时候计算属性所依赖的数据没有改变，如下面的firstname值，则不会重新执行这个计算方法

		// computed:{

		// 	fullName:function() {
		// 		return this.firstName + "" +this.lastName;
		// 	}
		// }
		//也可以用方法形式返回结果,当注意，放到插入、值表示式中要用fullName()的形式，因为此时fullName是一个函数，必须执行了才能返回值，不像computed,computed返回的是属性值




		//而方法没有缓存机制
		// methods:{  
		// 	fullName:function() {
		// 		return this.firstName + "" + this.lastName;
		// 	}
		// }，


		//侦听器
		watch:{
			firstName:function() { //侦听data中firstName值得变化
				this.fullName = this.firstName + "" + this.lastName;
			},
			lastName:function() {//侦听data中lastName值得变化
				this.fullName = this.firstName + "" + this.lastName;
			}
		}

	})
</script>
</html>